<template>
  <div>
    <h1>data 变量定义</h1>
    <ul>
      <li>{{ obj }}</li>
      <li>姓名：{{ obj.name }} - 年龄：{{ obj.age }}</li>
      <li>
        <button @click="changeObj">修改 obj</button>
      </li>
      <li>{{ count }}</li>
      <li>
        <button @click="changeRef">修改 count</button>
      </li>
      <li>{{ person }} = {{ person.sa }}</li>
    </ul>
  </div>
  <hr />
  <div>
    <ul>
      <li style="display: flex" v-for="(item, i) in list" :key="item.id">
        <p style="margin-right: 5px">{{ i + 1 }}.</p>
        <p style="margin-right: 20px">姓名：{{ item.name }}</p>
        <p>工资：{{ item.sa }}</p>
      </li>
    </ul>
    <div><button @click="add">新增</button></div>
  </div>
</template>

<script setup>
// 写 vue3 代码
/**
 * vue3 定义响应变量的方式：
 * 1. reactive函数
 *    步骤：
 *    1.1 导入 reactive 函数
 *    1.2 调用 reactive 函数定义复杂类型变量
 * 语法：const 变量名 = reactive(复杂类型变量的默认值)
 * 注意：不能整个变量=号赋值修改，不会触发视图更新
 *
 * 2. ref函数
 *    步骤：
 *    2.1 导入 ref 函数
 *    2.2 调用 ref 函数定义复杂类型变量
 * 语法：const 变量名 = ref(复杂或简单类型变量的默认值)
 * !注意：
 *    1. 读取和修改 ref 函数定义的值，需要通过 .value=》变量名.value(js中)
 * 课堂练习：
 * 1. 定义个 list 列表：[{id:1, name:'xx', sa: 15000}, {id:2, name:'xx', sa: 15000}...]
 * 2. 渲染 list
 * 3. 实现新增
 */
import { reactive, ref } from 'vue'

// 课堂练习
const list = ref([
  { id: 1, name: '王老吴', sa: 15000 },
  { id: 2, name: '李斯', sa: 12000 },
  { id: 3, name: '张三', sa: 10000 }
])

const add = () => {
  list.value.unshift({
    id: Date.now(),
    name: `x${Math.random()}`,
    sa: Math.floor(Math.random() * 10000 + 10000)
  })
}

// 方式 1
// 错误演示：不能定义简单类型
// const count = reactive(1)
// 定义复杂类型变量
let obj = reactive({
  name: '车宇航',
  age: 18
})
// 修改 obj
const changeObj = () => {
  obj.age++
  obj.name = '车宇航' + Math.random()
  // 错误演示
  // obj = {
  //   name: '王国辉',
  //   age: 16
  // }
}

// 方式 2
const count = ref(1)
const person = ref({
  name: '车宇航',
  age: 18,
  sa: 15000
})
const changeRef = () => {
  // 1. 读取 ref 函数定义的值=> 变量名.value
  // console.log(count.value)
  // 2. 修改 ref 函数定义的值=> 变量名.value = 新值
  // count.value = Math.random()

  // person.value.sa++
  person.value = { class: '前端 161', sa: 15000 }
}
</script>

<style lang="scss" scoped></style>
